<!--用户商品-->
<template>
  <div class="user_commodity_box">
    <!--选项卡-->
    <div class="menu">
      <div
        :class="activeIndex === 1 ? 'menu_item_active' : ''"
        class="menu_item"
        @click="handleSelect(1)"
      >
        待审阅价格
      </div>
      <div
        :class="activeIndex === 2 ? 'menu_item_active' : ''"
        class="menu_item"
        @click="handleSelect(2)"
      >
        全部商品
      </div>
    </div>
    <!--    查询模块-->
    <div class="search_box">
      <el-form
        ref="searchDate"
        :inline="true"
        :model="searchDate"
        class="demo-form-inline"
      >
        <el-form-item label="关键词：" prop="keyword">
          <el-input
            v-model="searchDate.keyword"
            placeholder="请输入关键词"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户：" prop="userName">
          <el-select v-model="searchDate.userName" placeholder="请选择用户">
            <el-option label="用户1" value="用户1"></el-option>
            <el-option label="用户2" value="用户2"></el-option>
            <el-option label="用户3" value="用户3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--    操作按钮模块-->
    <div class="operation_box">
      <el-button type="primary" @click="openDialog">新增</el-button>
    </div>
    <!--    表格-->
    <commodity-table :listDate="showList"></commodity-table>
    <!--    分页-->
    <div class="list_bottom">
      <div class="list_length">
        共<span>{{ total }}</span
        >条
      </div>
      <el-pagination
        :current-page="currentPage"
        :page-count="10"
        :page-size="pageSize"
        :page-sizes="[5, 15, 50, 100]"
        :total="total"
        background
        layout=" prev, pager, next,sizes,jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!--      编辑弹窗-->
    <Dialog ref="dialog" @addList="addList"></Dialog>
  </div>
</template>
<script>
import CommodityTable from "./commodityTable";
import { mapMutations, mapState } from "vuex";
import Dialog from "@/views/home/user/userCommodity/dialog";

export default {
  components: { CommodityTable, Dialog },
  data() {
    return {
      // 查询表单
      searchDate: {
        keyword: "",
        userName: "",
      },
      showList: [],
      activeIndex: 1, // 已支付未支付切换变量
      total: 0, // 列表总数
      currentPage: 1, // 当前页数
      pageSize: 5, // 没意思的数据个数
    };
  },
  created() {
    this.handleSelect(this.activeIndex);
  },
  computed: {
    ...mapState(["userCommodity"]),
  },
  watch: {
    userCommodity() {
      this.$nextTick(this.handleSelect(this.activeIndex));
    },
  },
  methods: {
    ...mapMutations(["setUserCommodity"]),
    // 查询
    onSubmit() {
      this.$message({
        message:
          "关键字：" +
          this.searchDate.keyword +
          "用户:" +
          this.searchDate.userId,
        type: "success",
      });
    },

    // 重置查询表单
    resetForm() {
      this.$refs.searchDate.resetFields();
    },
    // 切换商品
    handleSelect(key) {
      let list = [];
      if (key === 1) {
        this.activeIndex = 1;
        for (let i = 0; i < this.userCommodity.length; i++) {
          if (this.userCommodity[i].status === 0) {
            list.push(this.userCommodity[i]);
          }
        }
        this.total = list.length;
        this.showTable(list);
      } else {
        this.activeIndex = 2;
        this.total = this.userCommodity.length;
        this.showTable(this.userCommodity);
      }
    },
    // 拉起编辑弹窗
    openDialog() {
      // 调用子组件的开启
      this.$refs.dialog.showDialog();
    },

    // 新增数据
    addList(list) {
      // 新增id
      this.setUserCommodity(JSON.parse(list));
      this.handleSelect(this.activeIndex);
    },
    // 数据切片分页渲染表格
    showTable(list) {
      // 加载表格数据,模拟请求到数据
      if (this.currentPage > 1) {
        if (
          list.slice(
            this.pageSize * (this.currentPage - 1),
            this.pageSize * this.currentPage
          ) < 1
        ) {
          this.currentPage = 1;
          return (this.showList = list.slice(
            this.pageSize * (this.currentPage - 1),
            this.pageSize * this.currentPage
          ));
        }
      }
      this.showList = list.slice(
        this.pageSize * (this.currentPage - 1),
        this.pageSize * this.currentPage
      );
    },
    //pageSize 改变时触发
    handleSizeChange(val) {
      // .slice((currentPage-1)*pageSize,currentPage*pageSize)
      this.pageSize = val;
      this.handleSelect(this.activeIndex);
    },
    // currentPage 改变时会触发的函数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handleSelect(this.activeIndex);
    },
  },
};
</script>
<style scoped>
.el-menu-item.is-active {
  background-color: #4973ff !important;
  border-bottom-color: #4973ff !important;
}

.el-menu.el-menu--horizontal {
  border-bottom: 2px solid #4973ff !important;
}

.el-menu-item:hover {
  background-color: rgba(181, 243, 255, 0.67) !important;
}

.menu {
  display: flex;
  height: 50px;
  align-items: center;
  border-bottom: 2px solid #4973ff;
  margin-bottom: 20px;
}

.menu_item {
  width: 120px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #000000;
  font-size: 16px;
  border-bottom: 1px solid #4973ff;
  background-color: #ffffff;
  cursor: pointer;
}

.menu_item_active {
  color: #ffffff;
  background-color: #4973ff;
}
</style>
